<template>
	<view class="entertain">
		<xbd-page-card>
			<template>
				<view class="card">
					<xbd-image-title title="小保当工资奖金分配上报" :image="require('@/static/image/supervision/wait.png')">
						<template>
							<view class="report" @click="record">
								<image src="@/static/image/supervision/icon5.png"></image> 上报记录
							</view>
						</template>
					</xbd-image-title>
					<view class="tag">
						所在单位
					</view>
					<view class="text" >
						{{userInfo.department}}
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>合计工资（元）
					</view>
					<view class="input">
						<uni-easyinput v-model="salary" :inputBorder="false" maxlength="12" type="text"
							placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>合计奖金（元）
					</view>
					<view class="input">
						<uni-easyinput v-model="reward" :inputBorder="false" maxlength="12" type="text"
							placeholderStyle="font-size:30rpx;color:#A0A7B8;" placeholder="请输入" />
					</view>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>发放月份
					</view>
					<xbd-date-before-two fields="day" :date="date" :visible.sync="visible" @setDate="setDate">
						<template>
							<view class="date" @click="visible = true">
								<text  :class="[ date == '日期选择' ?  '' : 'color' ]" >{{ date }}</text>
							</view>
						</template>
					</xbd-date-before-two>
					<view class="tag">
						<text style="color:#FC4F4F">*</text>工资表及奖金分配表
					</view>
					<view class="image">
						<view class="box-image" v-for="(item,index) in upImg" :key="index">
							<image class="del" src="@/static/image/del.png" @click="del(item)"></image>
							<image class="images" :src="item" @click="image_click(item)"></image>
						</view>
						<view v-if="upImg.length !==6" class="upload" @click="choose_image">
							<image src="@/static/image/supervision/upload.png" mode=""></image>
							<view class="">
								上传图片
							</view>
						</view>
					</view>
				</view>
			</template>
		</xbd-page-card>
		<xbd-button text="提交" @clickBtn="submit()"></xbd-button>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		Supervision
	} from '@/api/index.js';
	export default {
		name: "entertain",
		data() {
			return {
				flag:true,
				date:'日期选择',
				visible: false,
				salary: '',
				reward:'',
				upImg: [],
				data_image: [],
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			record(){
				uni.navigateTo({
				  url: `/pages/supervision/business/list?type=2`,
				});
				
			},
			setDate(date) {
				console.log(date);
				this.date = date;
			},
			del(val) {
				console.log(val)
				this.upImg = this.upImg.filter(item => {
					return item !== val
				})
			},
			image_click(img) {
				// 点击预览图片
				dd.previewImage({
					current: 1,
					urls: [img],
				});
				console.log(img, 'img')
			},
			choose_image() {
				uni.chooseImage({
					count: 6 - this.upImg.length,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(chooseImageRes, 'chooseImageRes.tempFilePaths;')
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://113.135.192.25:18398/api/upload', //仅为示例，非真实的接口地址  后期接口变更需调整
								header: {
									'Content-Type': 'multipart/form-data',
									'Authorization': uni.getStorageSync("token")
								},
								filePath: tempFilePaths[i],
								fileType: 'image',
								name: 'file',
								success: (uploadFileRes) => {
									if (this.upImg.indexOf(JSON.parse(uploadFileRes.data).data
											.url) == -1 && (JSON.parse(uploadFileRes.data).data.url
											.indexOf('.jpg') !== -1 || JSON.parse(uploadFileRes
												.data).data.url.indexOf('.png') !== -1|| JSON.parse(uploadFileRes.data).data.url.indexOf('.jpeg')!== -1)) {
										this.upImg.push(JSON.parse(uploadFileRes.data).data.url)
										const a = JSON.parse(uploadFileRes.data).data.url
											.substring(
												JSON.parse(uploadFileRes.data).data.url
												.lastIndexOf(
													"upload") + 7, JSON.parse(uploadFileRes.data)
												.data
												.url.length)
										this.data_image.push(a)
									}
								}
							});
						}

					}
				});
				// console.log(this.upImg)
			},
			submit(){
				console.log('提交')
				var reg = /^[0-9]*$/;
				if(this.salary === ''){
					return this.$showToast('合计工资：请填写内容');
				}else if(!reg.test(this.salary)){
					return this.$showToast('合计工资：请输入0或正整数');
				}else if(this.reward === ''){
					return this.$showToast('合计奖金：请填写内容');
				}else if(!reg.test(this.reward)){
					return this.$showToast('合计奖金：请输入0或正整数');
				}else if(this.date === '日期选择'){
					return this.$showToast('发放月份：请选择内容');
				}else if(this.upImg.length === 0){
					return this.$showToast('工资表及奖金分配表：请上传相关图片');
				}
				
				if(this.flag){
					this.flag=false
					this.report()
				}
				
			},
			async report(){
				let a = []
				
				a = this.upImg.map((item,index) => {
					let r = {
						name:this.data_image[index],
						url:item
					}
					return r
				})
				 const o = {
					 salary: +this.salary,
					 reward: +this.reward,
					 month:this.date,
					 evidence:a,
					 department: this.userInfo.department,
				 }
				const res = await Supervision.postSalaryReport(o)
				if(res.success){
					uni.redirectTo({
					  url: `/pages/supervision/business/list?type=2`,
					});
				}else{
					this.flag=true
				}
				this.$showToast(res.msg);
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	::v-deep .uni-easyinput__placeholder-class {
		font-size: 30rpx;
	}

	.entertain {
		.card {
			.report{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				height: 56rpx;
				width: 190rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #000623;
				border: 2rpx solid #D0D6E5;
				border-bottom-left-radius: 30rpx;
				border-top-left-radius: 30rpx;
				margin-right: -32rpx;
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
			.input {
				font-size: 30rpx;
				border-bottom: 2rpx solid #EBEEF5;
				margin-bottom: 30rpx;
			}

			.tag {
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #000623;
				margin-bottom: 20rpx;
			}

			.date {
				margin-top: 30rpx;
				// width: 260rpx;
				padding:10rpx;
				color:#A0A7B8;
				font-size: 30rpx;
				border-bottom: 2rpx solid #EBEEF5;
				margin-bottom: 40rpx;
				
				.color{
					color: #000623;
				}
			}

			.text {
				margin-top: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #000623;
				margin-bottom: 40rpx;
			}


			.image {
				margin-top: 50rpx;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20rpx;

				.box-image {
					position: relative;
				}

				.del {
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					top: -16rpx;
					right: 4rpx;
				}

				.images {
					margin-right: 20rpx;
					width: 140rpx;
					height: 140rpx;
				}

				.upload {

					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: 20rpx;
					color: #A0A7B8;
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #d0d6e5;
					border-radius: 8rpx;
					line-height: normal;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 0;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
